<template lang="jade">
div#app
	div.return-bar
		i.iconfont(@click="back()") &#xe668;
		头像设置
	div.uc-set-up.mini_top
		span.protrait

		ul.clearfix
			li.cover(style="text-align:center")
				img(src="{{avatar}}")

			li.btn
				选择图片
				input(type="file",   accept="image/*",  @change="onFileChange($event)")

		button.login-out.m_btn(v-on:click="update()") 上传

</template>

<script>
import '../../assets/sass/user/setting.scss'
//import {c_user, n_article_addpic} from '../../config/api'
import api from '../../data/api'
import LRZ from 'lrz'
import { mapGetters } from 'vuex'
export default {

	data () {
		return {
			update_key:'', 
			info: {},
			avatar:'',
			busy:false,
			personName:'',
			rst_obj:null,
			images:'../../assets/images/user/protrait.jpg'
		}
	},

    computed: {
      ...mapGetters([
          'userInfo'
      ])
	},


	methods: {
 
		update(){

		},
 

		onFileChange(e){

			var self = this;
			var files = e.target.files || e.dataTransfer.files;
			if (!files.length) return; 
			this.busy = true;
			LRZ(files[0], {width: 800, height:600, quality:0.7}).then(function (rst) {
				// 处理成功会执行
				//console.log(rst);
				var img = new Image();
				img.src = rst.base64;
				img.onload = function () {
					self.avatar = img.src
					self.busy = false;
					self.upload(img.src)
				};
				self.rst_obj = rst

			})
		},

		upload(dataUrl){
			/* this.$http.post(n_article_addpic, this.rst_obj.formData,'').then(function (rs) {
			}); */

			if(this.update_key == ''){
				console.log('no');
				return;
			}
			this.rst_obj.formData.append('key', this.update_key)

			this.$http.post('http://new.p2p.com/?user&q=api/setuser/headUpload', this.rst_obj.formData,'').then(function (rs) {
			});


			
			/* api.user.update_protrait(this.rst_obj.formData).then( res => {
			}) */
		},


		back(){
			this.$route.router.go('/user')
			//window.history.back();
		},
		fetch: function (next) {
			var that = this;
			this.$http({url: c_user, method: 'GET'}).then(function (rs) {
				this.images = rs.data.data.avatar
				next()
			});
		}

	},
	route: {
		activate ( transition ) {
			/*this.fetch( function() {
			})*/
			var vm = this;
			this.avatar = transition.to.query.avatar;
			console.log(this.userInfo)
			api.user.get_protrait_key().then( res => {
				//vm.$store.dispatch('')
				if(res.status)
					vm.update_key = res.key
			});

			transition.next();
		}
	}
}
</script>